<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
	</head>

	<body>
		<div class="container" id="app">
			<div class="row content1">
				<div class="col-xs-12">
					<span class="gwc">购物车</span>
					<span class="gl pull-right">管理</span>
				</div>
				<div class="col-xs-12">
					<span class="gong">共9件宝贝</span>
				</div>
			</div>
			<div class="row gouwu">
				<div class="content2" v-for="item in data">
					<div class="content2-div1">
						<input class="checkbox1 checkbox" type="checkbox" style="outline: none;" name="AllCheckbox" @click="storechecked(item)" :checked="item.checked" />
						<img class="tianmao" src="img/tianmao.png" /><span class="dianpu">{{item.name}}</span><img class="jiantou" src="img/jiantou.png" />
						<span class="pull-right">领劵</span>
					</div>
					<div class="row content2-div2" v-for="shop in item.shop">
						<div class="col-xs-12">
							<div class="media">
								<div class="media-left">
									<input class="checkbox checkboxx" type="checkbox" style="outline: none;" name="Checkbox" 
									  @click="shopchecked(shop)" :checked="shop.checked" />
									<img class="goods-pic media-object" :src="shop.img" />
								</div>
								<div class="media-body">
									<p class="media-heading">{{shop.name}}</p>
									<small class="price">￥{{shop.price}}</small>
									<span class="shuliang-div pull-right"><span class="jian" @click="minus(shop)">-</span><span class="shuliang">{{shop.num}}</span><span
										 class="jia" @click="add(shop)">+</span></span>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="row jiesuan-div" style="background: #fff;">
					<input class="jiesuan-div-checkbox checkbox1 checkbox" type="checkbox" style="outline: none;" name="AllCheckbox"
					 @click="checkAll" :checked="allchecked" />
					<span class="quanxuan">全选</span>
					<span class="pull-right jiesuan" @click="createOrder">结算({{total_number}})</span>
					<span class="pull-right">合计：<span class="heji-price">￥{{total_price}}</span></span>
				</div>
			</div>
		</div>

		<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
		<script type="text/javascript" src="js/bootstrap.js"></script>
		<script type="text/javascript" src="js/index.js"></script>
		<script src="js/vue.js"></script>
		<script>
			var vue = new Vue({
				el: '#app',
				data: {
					total: 0,
					total_price: 0,
					total_number: 0,
					allchecked: false, //是否全选
					//关于全选，有两种方式，一种是我的方式，在每个店铺和商品里加checked，
					//另外一种则是新建一个数组，把每次选择后的数据，放进新的数组里，
					//结合应用场景，我的购物车，有店铺，店铺里面有商品，所以我觉得我的方式更好。
					data: [{
							id:1,
							name: "张三旗舰店",
							checked:false,
							shop: [{
								id: 1,
								img: "img/goods1.png",
								name: "超能天然皂粉小袋精巧装360克*2袋紫罗兰+青柠西柚馨香炫彩柔软呀",
								price: 15.5,
								num: 1,
								checked:false
							}]
						},
						{
							id:2,
							name: "李四旗舰店",
							checked:false,
							shop: [{
									id: 2,
									img: "img/goods1.png",
									name: "超能天然皂粉小袋精巧装360克*2袋紫罗兰+青柠西柚馨香炫彩柔软",
									price: 13.5,
									num: 1,
									checked:false
								},
								{
									id: 3,
									img: "img/goods1.png",
									name: "超能天然皂粉小袋精巧装360克*2袋紫罗兰",
									price: 18.5,
									num: 1,
									checked:false
								}
							]
						}
					]
				},
				watch: {
					data: {
						handler: function(val, oldval) {
							let total_price = 0;
							let total_number = 0;
							this.data.forEach((item) => {
								item.shop.forEach(item1 => {
									if(item1.checked == true){
										total_price += item1.num * item1.price;
										total_number = total_number + 1;
									}
									//选项有一个是取消的，那么不应该全选打勾
									if(item.checked == false){
										this.allchecked = false;
									}
								})
							})
							this.total_price = total_price;
							this.total_number = total_number;
						},
						deep: true
					}
				},
				created() {
					
					let total_price = 0;
					this.data.forEach((item) => {
						item.shop.forEach(item1 => {
							if(item.checked == true){
								total_price += item1.num * item1.price;
							}
							
						})
					})
					this.total_price = +total_price;
				},
				methods: {
					createOrder(){
						console.log(this.total_price);
						let shop = [];
						this.data.forEach((item) => {
							item.shop.forEach(item1 => {
								if(item1.checked == true){
									shop.push(item1);
								}
							})
						})
						console.log(shop)
					},
					checkAll() {
						if(this.allchecked == false){
							this.data.forEach((item) => {
								item.checked = true;
								item.shop.forEach(item1 => {
									item1.checked = true;
								})
							})
						}else{
							this.data.forEach((item) => {
								item.checked = false;
								item.shop.forEach(item1 => {
									item1.checked = false;
								})
							})
						}
						this.allchecked = !this.allchecked;
						console.log(this.data)
					},
					//店铺点击
					storechecked(store){
						console.log(store)
						//店铺未点击的状态
						if(store.checked == false){
							this.data.forEach((item) => {
								if(item.id == store.id){
									store.checked = true;
									item.shop.forEach(item1 => {
										item1.checked = true;
									})
								}
							})
							console.log(this.data)
						}else{
							this.data.forEach((item) => {
								if(item.id == store.id){
									store.checked = false;
									item.shop.forEach(item1 => {
										item1.checked = false;
									})
								}
							})
						}
						
					},
					//商品点击
					shopchecked(shop){
						console.log(shop)
						//商品未点击的状态
						if(shop.checked == false){
							this.data.forEach((item) => {
								//因为店铺的按钮，要所有商品点击才会有，所以这样设置。
								item.checked = true;
								item.shop.forEach(item1 => {
									
									if(item1.id == shop.id){
										
										item1.checked = true;
									}
									if(item1.checked == false){
										item.checked = false;
									}
								})
							})
							console.log(this.data)
						}else{
							this.data.forEach((item) => {
								item.shop.forEach(item1 => {
									if(item1.id == shop.id){
										item.checked = false;
										item1.checked = false;
									}
								})
							})
						}
					},
					minus(shop) {
						this.data.forEach((item) => {
							item.shop.forEach(item1 => {
								if (item1.id == shop.id) {
									if (item1.num - 1 == 0) {
										return
									} else {
										item1.num -= 1;
									}
								}
							})
						})
						console.log(shop);
					},
					add(shop) {
						console.log(this.data)
						this.data.forEach((item) => {
							item.shop.forEach(item1 => {
								if (item1.id == shop.id) {
									item1.num += 1;
								}
							})
						})
						console.log(shop);
					}
				}
			});
		</script>
		<script type="text/javascript">
			$(function() {
				function setRem() {
					var clientWidth = $(window).width();
					var nowRem = (clientWidth / 320 * 10);
					$("html").css("font-size", parseInt(nowRem, 10) + "px");
				};
				setRem();

				$(function() {
					var timer;
					$(window).bind("resize", function() {
						clearTimeout(timer);
						timer = setTimeout(function() {
							setRem();
						}, 100)
					})
				});
			});

			//全选反选
		</script>
	</body>

</html>
